<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:o="http://openfaces.org/">
	
	<style type="text/css">
		.olControlPanel {
			float: right;
			right: 0px;
			height: 30px;
		}
		.olControlPanel div {
			float: right;
			display:block;
			width:  24px;
			height: 24px;
			margin: 5px;
			background-color:red;
		}

		.olControlPanel .olControlNavigationItemActive {
			background-color: blue;
			background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/pan_on.png");
		}
		.olControlPanel .olControlNavigationItemInactive {
			background-color: orange;
			background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/pan_off.png");
		}
        .olControlPanel .olControlDrawFeatureItemActive {
            width:  22px;
            height: 22px;
            background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/draw_line_on.png");
        }
		.olControlPanel .olControlDrawFeatureItemInactive {
			width:  22px;
			height: 22px;
			background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/draw_line_off.png");
		}
		.olControlPanel .olControlZoomBoxItemInactive {
			width:  22px;
			height: 22px;
			background-color: orange;
			background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/drag-rectangle-off.png");
		}
        .olControlPanel .olControlZoomBoxItemActive {
			width:  22px;
			height: 22px;
			background-color: blue;
			background-image: url("#{generalHelper.openLayersThemeDefaultImgPath}/drag-rectangle-on.png");
        }
        .olControlPanel .olControlZoomToMaxExtentItemInactive {
			width:  18px;
			height: 18px;
			background-image: url("#{generalHelper.openLayersImgPath}/zoom-world-mini.png");
        }
        
		.alignTop {
			vertical-align:top;
		}
		.rich-filter-input {
			width: 50px;
		}
		.rich-spinner-input {
			width: 30px;
		}
	</style>
	
	<a4j:loadScript src="#{generalHelper.openLayersJS}" />
	<!-- a4j:loadScript src="http://maps.google.com/maps/api/js?sensor=false" /-->
	      <!-- a4j:loadScript src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"/-->
	      <!-- script type="text/javascript" src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"></script-->
	
	<h:panelGroup rendered="#{interactiveViewerHelper.showTitle}">
		<div align="center">
			<strong>VISUALIZADOR INTERACTIVO</strong>
			<br />
			<rich:separator lineType="solid"/>
			<br/>
		</div>
	</h:panelGroup>
	
	
	<h:form id="misc">
		<center>
			<rich:panel style="width:100%">
				<rich:toolBar height="25" itemSeparator="line">
					<rich:toolBarGroup rendered="#{interactiveViewerHelper.showSearchSpatialZoneToolbox}">
						<o:commandButton type="button" onclick="#{rich:component('searchSpatialZoneToolbox')}.show()">
							<h:graphicImage id="searchSpatialZoneImg" value="/img/find-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['interactiveviewer.search_spatial_zone']}" for="searchSpatialZoneImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['interactiveviewer.search_spatial_zone_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>

					<rich:toolBarGroup rendered="#{interactiveViewerHelper.showRightsToolbox || interactiveViewerHelper.showRestrictionsToolbox || interactiveViewerHelper.showResponsibilitiesToolbox}">
						<h:panelGroup>
						<o:commandButton type="button" onclick="#{rich:component('rightsPanelToolbox')}.show()" rendered="#{interactiveViewerHelper.showRightsToolbox}">
							<h:graphicImage value="/img/rights-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.rights_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.rights_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="#{rich:component('restrictionsPanelToolbox')}.show()" rendered="#{interactiveViewerHelper.showRestrictionsToolbox}">
							<h:graphicImage value="/img/restrictions-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.restrictions_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.restrictions_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="#{rich:component('responsibilitiesPanelToolbox')}.show()" rendered="#{interactiveViewerHelper.showResponsibilitiesToolbox}">
							<h:graphicImage value="/img/responsibilities-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.responsibilities_toolbox']}" style="font-weight:bold;"/>
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
								<span style="white-space:nowrap">
									#{messages['dataentry.responsibilities_toolbox_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						</h:panelGroup>
					</rich:toolBarGroup>

					<rich:toolBarGroup rendered="#{interactiveViewerHelper.borderEditMode != 'NONE'}">
						<h:panelGroup  rendered="#{interactiveViewerHelper.borderEditMode == 'CREATE' or interactiveViewerHelper.borderEditMode == 'MIXED'}">
							<o:commandButton type="button" onclick="#{rich:component('splitPanelToolbox')}.show()">
								<h:graphicImage id="createImg" value="/img/new.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.create_toolbox']}" for="createImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.create_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
						</h:panelGroup>
						
						<h:panelGroup rendered="#{interactiveViewerHelper.borderEditMode == 'SPLIT_MERGE' or interactiveViewerHelper.borderEditMode == 'MIXED'}">
							<o:commandButton type="button" onclick="#{rich:component('splitPanelToolbox')}.show()">
								<h:graphicImage id="divisionImg" value="/img/split-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.split_toolbox']}" for="divisionImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.split_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							<o:commandButton type="button" onclick="#{rich:component('mergePanelToolbox')}.show()">
								<h:graphicImage id="fusionImg" value="/img/merge-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.merge_toolbox']}" for="fusionImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.merge_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
						</h:panelGroup>
					</rich:toolBarGroup>

					<rich:toolBarGroup rendered="#{interactiveViewerHelper.showDataToolbox}">
						<o:commandButton type="button" onclick="#{rich:component('editDataPanelToolbox')}.show()" rendered="#{interactiveViewerHelper.showDataToolbox}">
							<h:graphicImage id="dataImg" value="/img/edit.gif" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['dataentry.editdata_toolbox']}" for="dataImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['dataentry.editdata_toolbox']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
					
					<rich:toolBarGroup rendered="#{interactiveViewerHelper.showSpatialAnalysisToolbox}">
						<o:commandButton type="button" onclick="#{rich:component('spatialAnalysisToolbox')}.show()" rendered="#{interactiveViewerHelper.showSpatialAnalysisToolbox}">
							<h:graphicImage id="undoImg" value="/img/undo-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['interactiveviewer.spatial_analysis']}" for="undoImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['interactiveviewer.spatial_analysis_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>

					<rich:toolBarGroup>
						<o:commandButton type="button" onclick="#{rich:component('layersToolbox')}.show()">
							<h:graphicImage id="layersImg" value="/img/layers-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['interactiveviewer.layers']}" for="layersImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['interactiveviewer.layers_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>

					<rich:toolBarGroup location="right" rendered="#{interactiveViewerHelper.showSaveModificationButtons}">
						<o:commandButton type="button" onclick="saveObjectModifications()">
							<h:graphicImage id="saveImg" value="/img/save-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['interactiveviewer.save']}" for="saveImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['interactiveviewer.save_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
						<o:commandButton type="button" onclick="cancelObjectModifications()">
							<h:graphicImage id="cancelImg" value="/img/cancel-icon.png" width="24px" height="24px"/>
							<br />
							<h:outputLabel value="#{messages['interactiveviewer.cancel']}" for="cancelImg" style="font-weight:bold;" />
							<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
								<span style="white-space:nowrap">
									#{messages['interactiveviewer.cancel_desc']}
								</span>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
	
					<rich:toolBarGroup location="right" width="24px" height="24px" rendered="#{interactiveViewerHelper.showHelpToolbox}">
						<o:commandButton type="button" rendered="#{interactiveViewerHelper.showHelpToolbox}">
							<h:graphicImage id="helpImg" value="/img/help.png" width="25px" height="25px"/>
							<br />
							<h:outputLabel value="Ayuda" for="helpImg" style="font-weight:bold;" />
							<rich:toolTip direction="top-left" showEvent="onclick" zorder="10000">
								<ui:include src="/WEB-INF/includes/showHelpIncl.xhtml">
									<ui:param name="width" value="500" />
									<ui:param name="mainMessage" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh." />
									
									<ui:param name="msgBullet"  value="EN DESARROLLO" />
									<ui:param name="msgBullet1" value="EN DESARROLLO" />
								</ui:include>
							</rich:toolTip>
						</o:commandButton>
					</rich:toolBarGroup>
				</rich:toolBar>
				
				<script type="text/javascript">
					//setTimeout( function() { mapEditor.updateSize(); alert('Hey!!') }, 7000 );
					function fixMap() {
						mapEditor.updateSize();
					}
					
					function updateHighlightedParcelList(evt) {
						var features = evt.features;

						var infoControl = getControl('infoControl');

						if (features == undefined || features.length == 0) {
							if (parcelFeaturesLayer.features.length != 0) {
								parcelFeaturesLayer.destroyFeatures();
								#{rich:element('spatialUnitIds')}.value = '';

								submitHighlightedSU();
							}
						}
						else {
							for (var i = 0; i &lt; features.length; i++) {
								if (!isFeatureInLayer(features[i], parcelFeaturesLayer)) {
									parcelFeaturesLayer.addFeatures(features[i]);
								}
								else {
									// The feature is already on list
									// let's remove it from there instead
									removeFeatureInLayerById(features[i].data.id, parcelFeaturesLayer);
								}
							}

							suIds = #{rich:element('spatialUnitIds')};
							suIds.value = '';
							for (var i = 0; i &lt; parcelFeaturesLayer.features.length; i++)
								suIds.value = suIds.value + parcelFeaturesLayer.features[i].data.id + ',';
							
							submitHighlightedSU();
						}
					}

					function isFeatureInLayer(feature, layer) {
						for (var i = 0; i &lt; layer.features.length; i++)
							if (feature.data.id == layer.features[i].data.id)
								return true;
						return false;
					}

					function removeFeatureInLayerById(id, layer) {
						for (var i = 0; i &lt; layer.features.length; i++)
							if (id == layer.features[i].data.id) {
								layer.destroyFeatures(layer.features[i]);
								return;
							}
					}

					function unHighlightAllParcels(evt) {
					}
	
					function highlightSelectedZone(zoneId) {
						var selectControl = getControl('parcelSelectControl');
						if (selectControl != null) {
							var layer = selectControl.layer;
		
							var feature = null;
							for (var i = 0; i &lt; layer.features.length; i++) {
								if (layer.features[i].data.id == zoneId) {
									feature = layer.features[i];
									break;
								}
							}
							if (feature != null) {
								selectControl.unselectAll();
								selectControl.select(feature);
							}
						}
					}
	
					function changeWorkingLayer(layerName) {
						var infoControl = getControl('infoControl');
						infoControl.layers = [getLayer(layerName)];
					}
	
					function getControl(name) {
						var selectControl = null;
						for (var i = 0; i &lt; mapEditor.controls.length; i++) {
							if (mapEditor.controls[i].id == name) {
								selectControl = mapEditor.controls[i];
								break;
							}
						}
						return selectControl;
					}
	
					function getLayer(layerId) {
						var layer = null;
						for (var i = 0; i &lt; mapEditor.layers.length; i++) {
							if (mapEditor.layers[i].id == layerId) {
								layer = mapEditor.layers[i];
								break;
							}
						}
						return layer;
					}

					function saveObjectModificationsJS() {
						//TODO: Redraw only the one we are working with
						for (var i = 0; i &lt; mapEditor.layers.length; i++) {
							mapEditor.layers[i].redraw();
						}

						polyLayer.destroyFeatures();
					}
					function cancelObjectModificationsJS() {
						polyLayer.destroyFeatures();
					}
				</script>
				
				<h:panelGroup id="grpDrawCreatedZone">
					<script type="text/javascript">
						function drawCreatedZoneJS() {
							var wkt = '#{interactiveViewerHelper.lastGeomWKT}';
							if (wkt != null) {
								if (wkt != '') {
									var feature = new OpenLayers.Format.WKT().read(wkt);
									polyLayer.addFeatures([feature]);
									vlayer.destroyFeatures();
								}
							}
						}
					</script>
				</h:panelGroup>
				
				
				<a4j:jsFunction
					name="saveObjectModifications"
					action="#{interactiveViewerHelper.saveCreatedZones}"
					reRender="zoomFun"
					oncomplete="saveObjectModificationsJS(); doZoom();">
				</a4j:jsFunction>
				<a4j:jsFunction
					name="cancelObjectModifications"
					action="#{interactiveViewerHelper.resetCreatedZones}"
					oncomplete="cancelObjectModificationsJS();">
				</a4j:jsFunction>
				
				<a4j:jsFunction name="setParcelId" reRender="panelRights"/>
				<a4j:jsFunction name="submitHighlightedSU" reRender="grpHighlighted"/>
				
				<h:inputHidden id="spatialUnitIds" value="#{interactiveViewerHelper.highlightedSpatialUnitIds}" />

				<m:map id="mapEditor" width="100%" height="450px" options="#{interactiveViewerHelper.mapOptions}" jsVariable="mapEditor">
					<m:wmsLayer
						name="Centroides de predio"
						url="#{generalHelper.wmsUrl}"
						params="{layers: '#{generalHelper.primaryWMSLayer}', transparent: true, format: 'image/png'}"
						options="{ isBaseLayer: true, projection: '#{generalHelper.workingSRS}' }">
					</m:wmsLayer>
					<m:vectorLayer name="Editable" jsVariable="vlayer"/>
					<m:vectorLayer name="Temp" jsVariable="polyLayer"/>
					<m:vectorLayer name="parcelFeaturesLayer" jsVariable="parcelFeaturesLayer" />
					<m:vectorLayer name="neighborParcelLayer" jsVariable="neighborParcelLayer"/>
					<m:navigationControl />
					<m:panZoomBarControl />
					<m:layerSwitcherControl options="{ascending:false, useLegendGraphics:true}"/>
					<m:scaleLineControl />
					<m:mousePositionControl />
					<m:overviewMapControl />
					<m:panelControl jsVariable="mapPanel">
						<m:zoomToMaxExtentControl options="{title:'#{messages['map.zoom_to_max_extent']}'}" />
					</m:panelControl>
					<m:script>#{mapHelper.mapScript}</m:script>
				</m:map>

				<ui:remove>
					<!-- Add this to the mapPanel -->
						<m:navigationControl options="{title:'#{messages['map.navigation']}'}"/>
						<m:zoomBoxControl options="{title:'#{messages['map.zoom_box']}'}"/>
				</ui:remove>
				
			</rich:panel>
			
			<br />
			<br />

		</center>
	</h:form>
	
	<h:form id="frmZone">
		<h:inputHidden id="zoneWkts" value="#{topographyMaintenanceHelper.zoneWkts}" />
		<a4j:jsFunction name="saveZones" action="#{topographyMaintenanceHelper.saveZones}"/>
	</h:form>

	<ui:include src="/viewer/toolbox/search.xhtml" />
	<ui:include src="/viewer/toolbox/mutateRRR.xhtml"/>
	<ui:include src="/viewer/toolbox/merge.xhtml"/>
	<ui:include src="/viewer/toolbox/split.xhtml"/>
	<ui:include src="/viewer/toolbox/editData.xhtml" />
	<ui:include src="/viewer/toolbox/layers.xhtml" />	
</ui:component>
